<style>
.custom-input-error {
  border: 1px solid #ed4014;
}

.custom-prepend {
  border-radius: 3px;
  box-sizing: border-box;
  border-bottom-right-radius: 0 !important;
  border-top-right-radius: 0 !important;
  height: 24px;
  width: 20px;
  display: inline-block;
  padding: 0 4px;
  line-height: 18px;
  border: 1px solid #dcdee2;
  border-right: none;
  margin-right: -5px;
  background: #f8f8f9;
}

.custom-input-number {
  width: calc(100% - 28px);
  display: inline-block;
  border-top-left-radius: 0 !important;
  border-bottom-left-radius: 0 !important;
}

.custom-error-title {
  display: block;
  color: #ed4014;
  font-size: 12px;
  line-height: 2;
  transform: scale(0.9);
}

.video-device-collect .ivu-form .ivu-form-item-label {
  padding: 10px 2px 0px 0;
}
</style>
<template>
  <div style="width:100%;min-width: 83px;overflow: hidden;">
    <span style="color:#ed4014;">*</span>
    <slot name="prepend" />
    <InputNumber
      size="small"
      class="custom-input-number"
      :class="{'custom-input-error':hasError}"
      v-model="currentValue"
      name="坐标点"
      @on-blur="blur"
      @on-change="change"
    />
    <span
      class="custom-error-title"
      v-if="hasError"
    >请输入坐标点</span>
  </div>
</template>
<script>
const transformItemKey = str => {
  const arr = str.split(".");
  return {
    firstKey: arr[0],
    secondKey: arr[1],
    thirdKey: arr[2]
  };
};
export default {
  props: {
    value: {
      default: 1,
      type: Number
    },
    itemKey: {}
  },
  data() {
    return {
      currentValue: null,
      hasError: false
    };
  },
  methods: {
    change(value) {
      if (!!value) this.hasError = false;
      const { itemKey } = this;
      const { firstKey, secondKey, thirdKey } = transformItemKey(itemKey);
      this.$emit("changeValue", firstKey, secondKey, thirdKey, value);
    },
    blur(e) {
      if (!this.currentValue) {
        this.hasError = true;
      }
    },
    submit(callback) {
      if (!this.currentValue) {
        this.hasError = true;
        callback(false);
      } else callback(true);
    }
  },
  mounted() {
    this.currentValue = this.value;
  },
  beforeDestroy() {
    this.currentValue = null;
  },
  watch: {
    value(value) {
      this.currentValue = value;
    }
  }
};
</script>
